<template>
  <div>
    <div style="margin-bottom: 20px">
      {{ channel }} 频道
    </div>
    <div v-for="(item, index) in videoList" :key="item.id" style="margin-left: 20px;display: inline-block">
      <img :src="item.videoCover" style="width: 300px; height: 168px">
      <div style="font-size: 15px"> {{ item.videoName }} </div>
      <br>
      <div style="font-size: 13px"> {{ item.videoAuthor }} - {{ item.videoDate }} </div>
    </div>
  </div>
</template>

<script>
import { listVideo } from '@/api/video'
import { getChannel } from '@/api/channel'

export default {
  data () {
    return {
      videoList: [],
      channel: null,
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        channelId: null
      }
    }
  },
  methods: {

  },
  async created () {
    this.queryParams.channelId = this.$route.params.id

    // 获取当前频道信息
    const res1 = await getChannel(this.$route.params.id)
    this.channel = res1.data.data.name

    // 获取当前频道视频列表
    const res = await listVideo(this.queryParams)
    this.videoList = res.data.rows
  }
}
</script>

<style scoped lang="less">

</style>
